<template>
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('pageTitle.financeLedgerDetail')}}</span> <!--财务平账明细-->
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item prop="orderId" label=""> <!--内部订单号-->
                            <el-input v-model="form.orderId" :placeholder= "$t('common.innerOrderId')" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="mobileNumber" label=""> <!--手机号-->
                            <el-input v-model="form.phone" :placeholder= "$t('common.mobileNumber')" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="appName" label="">
                            <select-app-list v-model="form.appName" :placeholder="$t('system.appName')"></select-app-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                   
                    <!-- 伪名 -->
                    <el-col :span="4">
                        <el-form-item prop="whiteProductName" v-if="domain == 'Bene'"> <!---->
                            <el-input v-model="form.whiteProductName" :placeholder="$t('common.productName')" clearable><!----></el-input>
                        </el-form-item>
                        <el-form-item prop="kana" v-else> <!--姓名-->
                            <select-kana-list v-model="form.kana" :multiple="false" :placeholder="$t('finance.pseudonym')"></select-kana-list><!--app名称-->
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item prop="applyTime" label=""><!--申请时间-->
                            <el-date-picker
                                    style="width:95%;"
                                    v-model="form.applyTime"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm"
                                    value-format="timestamp"
                                    :editable="false"
                                    range-separator="-"
                                    :default-time="['00:00:00', '23:59:59']"
                                    :start-placeholder="$t('common.applyStartTime')"
                                    :end-placeholder="$t('common.applyEndTime')"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="createTime" label=""><!--平账时间-->
                            <el-date-picker
                                    style="width:100%;"
                                    v-model="form.createTime"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm"
                                    value-format="timestamp"
                                    :editable="false"
                                    range-separator="-"
                                    :default-time="['00:00:00', '23:59:59']"
                                    :start-placeholder="$t('finance.ledgerStarTime')"
                                    :end-placeholder="$t('finance.ledgerEndTime')"></el-date-picker>
                        </el-form-item>
                    </el-col>
                     <el-col :span="6">
                        <el-form-item style="margin-left:5px">
                            <el-button @click="search" icon="el-icon-search" type="primary">{{ $t('common.search') }}</el-button>
                            <el-button @click="exportExcel" icon="el-icon-upload2" type="primary">{{ $t('common.export') }}</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>


            </el-form><!--el-form end-->
        </div><!--content_panel_top-->
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table :data="tableData" style="width: 100%;" :highlight-current-row="true" :max-height="tableMaxHeight">
                        <el-table-column :label="$t('common.innerOrderId')"  prop="orderId" min-width="150" ></el-table-column><!--内部订单号-->
                        <el-table-column :label="$t('common.mobileNumber')" prop="phone" width="150"></el-table-column><!--手机号码-->

                        <el-table-column :label="$t('system.appName')" prop="appName" min-width="130"></el-table-column><!--APP名称-->
                        <el-table-column v-if="domain=='Bene'" :label="$t('finance.productName')" prop="whiteProductName" min-width="130"></el-table-column><!--伪名-->
                        <el-table-column v-else :label="$t('finance.pseudonym')" prop="kana" min-width="130"></el-table-column><!--伪名-->
                        <el-table-column :label="$t('common.applyDate')" prop="applyTime" width="160">
                            <template slot-scope="{ row }">{{ row.applyTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column><!--申请时间-->
                        <el-table-column :label="$t('finance.ledgerTime')" prop="createTime" width="160">
                            <template slot-scope="{ row }">{{ row.createTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column><!--平账时间-->

                        <el-table-column :label="$t('finance.ledgerType')" prop="type"  min-width="120">
                            <template slot-scope="{ row }">{{ row.type | LedgerType }}</template><!--平账类型-->
                        </el-table-column>

                        <el-table-column :label="$t('finance.ledgerMoney')" prop="amount" width="130" min-width="100">
                            <template slot-scope="{ row }">{{ row.amount | formatCurrency }}</template><!--平账金额-->
                        </el-table-column>

                        <el-table-column :label="$t('finance.ledgerRemark')" prop="remark" :show-overflow-tooltip="true"  min-width="160"><!--平账备注-->
                        </el-table-column>

                        <el-table-column :label="$t('common.operator')" prop="userName" width="150" min-width="100"><!--操作人-->
                        </el-table-column>

                    </el-table>
                    <!--分页组件-->
                    <pagination @pageChange="pageChange" :page="page"></pagination>
                </div><!--module_content-->
            </div>
        </div><!--module_content-->
        <!-- 平账 -->
        <el-dialog :title="$t('pageTitle.financeLedger')" :visible.sync="dialogVisible" width="25%">
            <el-form :model="formApplyCorrection" :inline="false" class="module_form">
                <el-form-item :label="$t('common.innerOrderId') + ':'" :label-width="formLabelWidth"><!--内部订单号-->
                    {{formApplyCorrection.innerOrderId}}
                </el-form-item>
                <el-form-item :label="$t('common.restRepay') + ':'" :label-width="formLabelWidth"><!--挂账金额-->
                   <el-col :span="8">
                        {{formApplyCorrection.restRepay}}
                   </el-col>
                </el-form-item>
                <el-form-item :label="$t('common.penaltyInterest') + ':'" :label-width="formLabelWidth"><!--罚息-->
                    {{formApplyCorrection.penaltyInterest}}
                </el-form-item>

                <el-form-item :label="$t('finance.amountPublicTransfer' ) + ':'" :label-width="formLabelWidth"><!--对公转账金额-->
                     <el-input-number
                     :precision="2"
                     controls-position="right"
                     v-model="formApplyCorrection.amountPublicTransfer"
                     :placeholder= "$t('finance.amountPublicTransfer')" clearable
                     />
                </el-form-item>

                <el-form-item :label="$t('finance.freePenaltyInterest') + ':'" :label-width="formLabelWidth"><!--免罚息金额-->
                   <el-input-number
                   :precision="2"
                   v-model="formApplyCorrection.freePenaltyInterest"
                   :placeholder= "$t('finance.freePenaltyInterest')"
                   clearable controls-position="right"
                   />
                </el-form-item>
                <el-form-item :label="$t('common.remark') + ':'" :label-width="formLabelWidth"><!--备注-->
                  <el-input
                    type="textarea"
                    placeholder="请输入内容"
                    v-model="formApplyCorrection.remark"
                    maxlength="30"
                    show-word-limit
                    />

                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
                <el-button type="primary" @click="submitLedger">{{ $t('common.confirm') }}</el-button>
            </div>
        </el-dialog>
        <!-- 平账 -->
    </div>
</template>

<script>
    import Pagination from '@/components/pagination';
    import mixin from '@/service/mixin';
    import {keyMap} from '@/config';
    import SelectAppList from '@/components/select-app-list';
    import SelectKanaList from '@/components/select-kana-list';

    export default {
        name: 'repayNotRepay',
        components: {
            Pagination,
            SelectAppList,
            SelectKanaList
        },
        mixins: [mixin],
        data() {
            return {
                domain:'',
                form: {
                    orderId: '',
                    userPhone: '',
                    appName: '',
                    kana:'',
                    whiteProductName:'',
                    phone:''
                },
                rules: {
                    orderId: [],
                    userPhone: []
                },
                overdueType: keyMap.overdueType,
                keyMap,
                formApplyCorrection: {
                    name: '',
                    orderId: '',
                    restRepay: '',
                    correctReason: this.$t('finance.errorOverdueCorrection')
                },
                dialogVisible: false,
                formLabelWidth: "120px"
            };
        },
        methods: {
            getTableData(page = this.page) {
                const params = this.fillParams(page);
                this.$api.finance.fianceLedger.getSettleBills(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.tableData = data.resultData;
                        this.setPage(data.page, this.page);
                    }
                });
            },
            search() {
                this.page.currentPage = 1;
                this.getTableData();
            },
            // 打开模态框 传递数据
            showModal(row){
                this.dialogVisible = true;
                this.formApplyCorrection.innerOrderId = row.orderId;
                this.formApplyCorrection.restRepay = row.restRepay;
                this.formApplyCorrection.penaltyInterest = row.lateCharge;
            },
            fillParams(page = this.page) {
                const form = this.form;
                const params = {
                    phone:'',
                    orderId: '',
                    applyTimeStart: '',
                    applyTimeEnd: '',
                    createTimeStart: '',
                    createTimeEnd: '',
                    appName: '',
                    kana:'',
                    whiteProductName:'',
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    }
                };
                Object.keys(form).forEach(key => {
                    if (typeof form[key] === 'string' && form[key] && form[key]) {
                        form[key] = form[key].trim();
                        params[key] = form[key];
                    }
                });
                params.orderId = form.orderId;

                if (form.createTime) {
                    params.createTimeStart = form.createTime[0];
                    params.createTimeEnd = form.createTime[1];
                }
                if (form.applyTime) {
                    params.applyTimeStart = form.applyTime[0];
                    params.applyTimeEnd = form.applyTime[1];
                }

                return params;
            },
            applyCorrection(row) {
                this.dialogApplyCorrection = true;
                this.formApplyCorrection = Object.assign({
                    name: '',
                    orderId: '',
                    correctDay: '',
                    correctReason: this.$t('finance.errorOverdueCorrection')
                }, row);

            },
            exportExcel() {
                const params = this.fillParams();
                const user = this.$storage.get('user');
                const language = this.$storage.getLocal('language');
                params.language = language;
                params.token = user.token;
                const {$apiConf} = this;
                const url = this.$urlUtil.fillParams(params, $apiConf.baseUrl + $apiConf.urlType.finance.fianceLedger.settleBillExcel, ['page']);
                this.$openNewBlank(url);
            },
            // 模态框提交按钮
            submitLedger() {

                let params = {
                    orderId: this.formApplyCorrection.innerOrderId,
                    normalTransferAmount: this.formApplyCorrection.amountPublicTransfer,
                    settleChargeAmount: this.formApplyCorrection.freePenaltyInterest,
                    remark: this.formApplyCorrection.remark
                }
                this.$api.finance.fianceLedger.doSettleBill(params).then(res => {
                    const {status, error} = res;
                    if ('1' === status && '00000000' === error) {
                        this.dialogApplyCorrection = false;
                        this.getTableData();
                    }
                });
            }
        },
        created() {
            this.domain = this.$storage.get('user').domain
            // console.log('start');
            this.tableMaxHeight = document.body.clientHeight - 280;
            this.getTableData();
        }
    }
</script>
<style lang="scss" scoped>
    .cursor-pointer {
        cursor: pointer;
    }
</style>
